<template>
  <div id="preview">
    <el-dialog :visible.sync="showDialog" :close-on-click-modal="false" width="414px" top="30px" @close="closeDialog" >
      <header v-if="currentType!==3" slot="title">
       <strong> {{ $t('preview') }}</strong>
      </header>
      <ArticleItem :newsType="currentType" :news-id="newsId" :resources="resources" :defalut-size="defalutSize" :lan="lan" />
    </el-dialog>

    <el-dialog id="videoContent" :close-on-click-modal="false" :visible.sync="showVideoDialog" width="620px" @close="closeDialog">
      <videoItem :newsType="currentType" :news-id="newsId" :resources="resources"/>
    </el-dialog>
  </div>
</template>
<script>
import ArticleItem from './articleItem.vue';
import videoItem from './videoItem.vue';

export default {
  name: 'Preview',

  components: { ArticleItem, videoItem },

  props: {
    // 预览类型   value=100是微头条类型，由生活管理后台迁移过来
    value: {
      type: Number,
      required: true
    },
    lan: {
      type: String,
      default: ''
    },
    newsId: {
      type: [String, Number],
      default: ''
    },
    // 用于发布【newsId为空】传送资源
    resources: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  data() {
    return {
      showDialog: false,
      showVideoDialog: false,
      currentType: this.value, // 避免被重写
      defalutSize: '1'
    };
  },

  created() {
    if (this.newsId === '') {
      if (JSON.stringify(this.resources) == '{}') {
        this.$message({
          message: this.$t('Cannot_find_information_source_cannot_preview'),
          type: 'warning'
        });
        return false;
      }
    }
    if (this.currentType === 3 || this.currentType === 8) {
      this.showVideoDialog = true;
    } else {
      this.showDialog = true;
    }
  },



  methods: {
    closeDialog() {
      this.showDialog = false;
      this.showVideoDialog = false;
      this.currentType = '';
      this.$emit('input', this.currentType);
    }
  }
};
</script>

<style lang="scss" scoped>
strong {
  margin-left: 5px;
}

.el-menu-item.is-disabled {
  color: #303133;
  opacity: 1;
  cursor: default;
  background: 0 0 !important;
}
#preview /deep/ .el-dialog__body {
  padding: 0px;
}
#preview /deep/ .el-dialog__header {
  padding: 8px 0px 5px;
}
#videoContent /deep/ .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
}
</style>
